﻿<div [@routerTransition] id="app-contact">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>加工模板管理</span>
                </h3>
                <span class="m-section__sub">
                    设置模板的工序序列
                </span>
            </div>
            <div class="col text-right mt-3 mt-md-0">
                <button (click)="showDialogToAdd()" class="btn btn-primary"><i class="fa fa-plus"></i> 添加模板</button>
            </div>
        </div>
    </div>


    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">

            
                <div class="row align-items-center">
                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container" >
                        <p-table #dt [columns]="cols" [value]="templates" selectionMode="single"
                            [(selection)]="selectedStation" (onRowSelect)="onRowSelect($event)" [paginator]="false">

                            <ng-template pTemplate="header" let-columns>
                                <tr>
                                    <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                                        {{col.header}}
                                        <p-sortIcon [field]="col.field"></p-sortIcon>
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowData let-columns="columns" let-record="$implicit">
                                <tr [pSelectableRow]="rowData" class="">
                                    <td *ngFor="let col of columns">
                                        {{rowData[col.field]}}
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>


                        <p-dialog header="模板信息" [(visible)]="displayDialog" [focusOnShow]="false"
                            [responsive]="true" showEffect="fade" [modal]="true" [style]="{width: '400px'}">
                            <div class="ui-g ui-fluid" *ngIf="template">

                                <div class="ui-g-12">
                                    <div class="form-group">
                                        <label>编号</label>
                                        <input pInputText id="stationName" class="form-control" id="id"
                                            [(ngModel)]="template.id" readonly="true">
                                    </div>
                                </div>
                                <div class="ui-g-12">
                                    <div class="form-group">
                                        <label>模板名称</label>
                                        <input pInputText class="form-control ng-pristine ng-valid ng-touched"
                                            id="companyName" [(ngModel)]="template.templateName" autofocus />
                                    </div>
                                </div>
                                <div class="ui-g-12">
                                    <button (click)="initProcess()" class="btn btn-primary"><i class="fa fa-plus"></i> 初始化</button>
                                </div>
                                <div class="ui-g-12">
                                        <p-table [value]="template.templateNodeList">
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th>序号</th>
                                                        <th>工序名称</th>
                                                        <th>工位</th>
                                                        <th>操作</th>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-rowData>
                                                    <tr>
                                                        <td pEditableColumn>
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <input pInputText type="text" [(ngModel)]="rowData.orderIndex" required name='index'>
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{rowData.orderIndex}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                        <td pEditableColumn>
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <input pInputText type="text" [(ngModel)]="rowData.nodeName" required name='dpt'>
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{rowData.nodeName}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>      
                                                        <td>                                                                   
                                                                {{rowData.workStationName}}
                                                            </td>                                                  
                                                        <td >
                                                                <a href="javascript:;" (click)="onDelete(rowData)" class="btn btn-outline-danger m-btn m-btn--icon btn-sm m-btn--icon-only m-btn--pill">
                                                                        <i class="fa flaticon-delete-1"></i>
                                                                    </a>
                                                        </td>
                                                    </tr>
                                                </ng-template>
                                            </p-table>
                                    </div>
                            </div>
                            <p-footer>
                                <div class="ui-dialog-buttonpane ui-helper-clearfix">
                                    <button type="button" pButton icon="pi pi-times" class="ui-button-danger" (click)="delete()"
                                        label="删除"></button>
                                    <button type="button" pButton icon="pi pi-check" (click)="save()"
                                        label="保存"></button>
                                </div>
                            </p-footer>
                        </p-dialog>
                    </div>
                </div>
            </div>
        </div>
    </div>




</div>